<template>
  <section>
    <section v-show="visible">
      <section class="row-container" @click="handleRowClick('staff', '人员')">
        <el-row class="full">
          <el-col :span="5" class="fullHeight">
            <section class="fullHeight title-center" style="justify-content: center;">
              <i class="ty icon-personnel-online icon"></i>
            </section>
          </el-col>

          <el-col :span="8" :offset="1" class="fullHeight">
            <section class="title-center text">
              人员总数
            </section>
          </el-col>

          <el-col :span="10" class="fullHeight">
            <section class="title-center text count-box">
              <el-tooltip :content="selection.staff.length + ''" class="item" effect="dark" placement="top">
                <span class="count-box-num">
                  {{selection.staff.length}}
                </span>
              </el-tooltip>&nbsp;人
            </section>
          </el-col>
        </el-row>
      </section>

      <section class="row-container" @click="handleRowClick('car', '车辆')">
        <el-row class="full">
          <el-col :span="5" class="fullHeight">
            <section class="fullHeight title-center" style="justify-content: center;">
              <i class="ty icon-cheliang1 icon"></i>
            </section>
          </el-col>

          <el-col :span="8" :offset="1" class="fullHeight">
            <section class="title-center text">
              车辆总数
            </section>
          </el-col>

          <el-col :span="10" class="fullHeight">
            <section class="title-center text count-box">
              <el-tooltip :content="selection.car.length + ''" class="item" effect="dark" placement="top">
                <span class="count-box-num">
                  {{selection.car.length}}
                </span>
              </el-tooltip>&nbsp;辆
            </section>
          </el-col>
        </el-row>
      </section>

      <section class="row-container" @click="handleRowClick('video', '视频')">
        <el-row class="full">
          <el-col :span="5" class="fullHeight">
            <section class="fullHeight title-center" style="justify-content: center;">
              <i class="ty icon-shipinzongshu icon"></i>
            </section>
          </el-col>

          <el-col :span="8" :offset="1" class="fullHeight">
            <section class="title-center text">
              视频总数
            </section>
          </el-col>

          <el-col :span="10" class="fullHeight">
            <section class="title-center text count-box">
              <el-tooltip :content="selection.video.length + ''" class="item" effect="dark" placement="top">
                <span class="count-box-num">
                  {{selection.video.length}}
                </span>
              </el-tooltip>
              &nbsp;个
            </section>
          </el-col>
        </el-row>
      </section>

      <section class="row-container" style="border: none;" @click="handleRowClick('case', '案件')">
        <el-row class="full">
          <el-col :span="5" class="fullHeight">
            <section class="fullHeight title-center" style="justify-content: center;">
              <i class="ty icon-anjianzongshu icon"></i>
            </section>
          </el-col>

          <el-col :span="8" :offset="1" class="fullHeight">
            <section class="title-center text">
              案件总数
            </section>
          </el-col>

          <el-col :span="10" class="fullHeight">
            <section class="title-center text count-box">
              <el-tooltip :content="selection.case.length + ''" class="item" effect="dark" placement="top">
                <span class="count-box-num">
                  {{selection.case.length}}
                </span>
              </el-tooltip>
              &nbsp;件
            </section>
          </el-col>
        </el-row>
      </section>

    </section>
  </section>
</template>

<script>
  export default {
    name: 'map-selection-overview',
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      selection: {
        type: Object,
        default: () => {
          return {
            staff: [],
            case: [],
            car: [],
            video: []
          }
        }
      }
    },
    methods: {
      /**
       * @Author ling.yuan@topevery.club
       * @Date 2019/12/12 16:28:55
       * @Description 行点击事件
       */
      handleRowClick(event, title) {
        this.$emit('rowClick', event, title + '列表')
      }
    }
  }
</script>

<style scoped lang="scss">
  .full {
    width: 100%;
    height: 100%;

    section {
      height: 100%;
    }
  }

  .row-container {
    width: 100%;
    height: 40px;
    border-bottom: 1px solid #00000020;
    padding: 5px 0px;

    .count-box {
      justify-content: flex-end;
      margin-right: 5px;
    }

    .count-box-num {
      color: #ffb013;
      font-size: 20px;
      margin-bottom: 3px;
    }
  }

  .row-container:hover {
    background-color: #00000010;
    cursor: pointer;
  }

  .fullHeight {
    height: 100%;
  }

  .title-center {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -o-flex;
    align-items: center;
    /*justify-content: center;*/
  }

  .text {
    font-size: 16px;
    font-weight: bold;
  }

  .icon {
    font-size: 30px;
    color: #409EFF;
  }
</style>
